.popular {
  display: grid;
  grid-template-areas: "a b" "a c";
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  margin: 14px;

  .popularItem {
    position: relative;
    box-shadow: 0 0 5px 0 hsla(0, 0%, 49%, 0.45);
    font-size: 13px;
    .price {
      font-size: 16px;
      text-align: right;
    }
  }
  .popularItemOne {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 10px;
    .info {
      flex: 1;
      overflow: hidden;
      padding: 0 10px;
    }
  }
  .popularItemTwo {
    display: flex;
    gap: 5px;
    .box {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 10px 10px 10px 0;
      .info {
        flex: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
    }
  }

  .popularItem:nth-child(1) {
    grid-area: a;
  }
  .popularItem:nth-child(2) {
    grid-area: b;
  }
  .popularItem:nth-child(3) {
    grid-area: c;
  }
  .popularItem:nth-child(4) {
    grid-area: d;
  }
}

.productsBox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  font-size: 13px;
  padding: 14px;
  .productsItem {
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 5px 0 hsla(0, 0%, 49%, 0.45);
    .info {
      padding: 0 14px 14px 14px;
      margin-top: 5px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      .text {
        flex: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
      .price {
        font-size: 16px;
        text-align: right;
      }
    }
  }
}

.industry {
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 10px;
  .industryItem {
    display: flex;
    gap: 10px;
    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 14px 0;
    }
    .desc1 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
    }
    .desc {
      font-size: 13px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
    }
  }
  .industryItem:nth-of-type(1) {
    background-color: rgba(228, 228, 228, 1);
  }

  .industryItem:nth-of-type(1) .buttonBg {
    background-color: rgba(155, 155, 155, 1);
  }

  .industryItem:nth-of-type(2) {
    background-color: rgba(176, 219, 255, 1);
  }

  .industryItem:nth-of-type(2) .buttonBg {
    background-color: rgba(18, 147, 255, 1);
  }

  .industryItem:nth-of-type(3) {
    background-color: rgba(197, 255, 240, 1);
  }

  .industryItem:nth-of-type(3) .buttonBg {
    background-color: rgba(19, 175, 135, 1);
  }

  .industryItem:nth-of-type(4) {
    background-color: rgba(255, 241, 219, 1);
  }

  .industryItem:nth-of-type(4) .buttonBg {
    background-color: rgba(252, 158, 18, 1);
  }

  .industryItem:nth-of-type(5) {
    background-color: rgba(255, 176, 189, 1);
  }

  .industryItem:nth-of-type(5) .buttonBg {
    background-color: rgba(252, 18, 56, 1);
  }

  .industryItem:nth-of-type(6) {
    background-color: rgba(255, 197, 248, 1);
  }

  .industryItem:nth-of-type(6) .buttonBg {
    background-color: rgba(175, 19, 154, 1);
  }

  .industryItem:nth-of-type(7) {
    background-color: rgba(219, 255, 243, 1);
  }

  .industryItem:nth-of-type(7) .buttonBg {
    background-color: rgba(18, 252, 170, 1);
  }

  .industryItem:nth-of-type(8) {
    background-color: rgba(185, 255, 176, 1);
  }

  .industryItem:nth-of-type(8) .buttonBg {
    background-color: rgba(44, 252, 18, 1);
  }

  .industryItem:nth-of-type(9) {
    background-color: rgba(245, 255, 197, 1);
  }

  .industryItem:nth-of-type(9) .buttonBg {
    background-color: rgba(146, 175, 19, 1);
  }
}

.trends {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  .trendsItem {
    display: flex;
    gap: 10px;
    box-shadow: 0 0 5px 0 hsla(0, 0%, 49%, 0.45);

    .info {
      display: flex;
      flex-direction: column;
      font-size: 13px;
      gap: 8px;
      padding: 14px 14px 14px 0;
      .text {
        flex: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
    }
  }
}
